<template>
  <div class="rebate_scroll">
    <div class="header">
      <div class="nav-bg">
        <div class="nav-bar">
          <div class="left" @click="backClick">
            <img src="../../../assets/img/rebate/ic_back_left.png" alt="">
          </div>
          <div class="center">申请详情</div>
          <div class="right" @click="$router.push('/rebate/help')">常见问题</div>
        </div>
      </div>
      <div class="content_box">
        <div class="feedback_status">返利状态</div>
        <div class="content_title">受理中</div>
        <div class="test">游戏商正在受理核实中,期间请勿改名</div>
        <div class="tips-box">
          <div class="tips-list">
            <span>1</span>
            <p>若返利信息无误，则在申请后24小时内到账；</p>
          </div>
          <div class="tips-list">
            <span>2</span>
            <p>遇节假日则有可能延迟，请耐心等待！</p>
          </div>
        </div>
        <div class="tips_notes">注：[受理中]可能存在已发放，但是状态未及时更新，请以游 戏内实际发放情况为准~</div>
      </div>
    </div>
    <div class="game_info">
      <ul class="info_list">
        <li>
          <span>游戏名</span>
          <h3>{{info.gamename}}</h3>
        </li>
        <li>
          <span>充值小号</span>
          <h3>{{info.xh_showname}}({{username}})</h3>
        </li>
        <li>
          <span>充值时间</span>
          <h3>{{info.day_time}}</h3>
        </li>
        <li>
          <span>充值金额</span>
          <h3 style="color:#EC2424;">{{info.default_total}}元</h3>
        </li>
        <li>
          <span>游戏区服</span>
          <h3>{{info.servername}}</h3>
        </li>
        <li>
          <span>角色名</span>
          <h3>{{info.role_name}}</h3>
        </li>
        <li>
          <span>道具申请</span>
          <h3>{{info.prop_beizhu}}</h3>
        </li>
        <li>
          <span>备注</span>
          <h3>{{info.user_beizhu}}</h3>
        </li>
        <li>
          <span>申请时间</span>
          <h3>{{info.addtime | Timestamp}}</h3>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
// import {getPost} from '../../../network/post'

export default {
  props: {
    info: {
      type: Object,
      default() {
        return {}
      }
    },
    username: {
      type: String,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      isShow: false,
      gameid: '5700',
      radio: '1',
    }
  },
  methods: {
    backClick() {
      this.$router.replace('/rebate_apply_list')
    },
    notClick() {
      this.isShow = false
    },
    sureClick() {
      this.isShow = false
      var url = '/rebate_apply_revoke'
      var data = {
        apply_id: this.$route.params.iid,
        rmk_id: this.radio,
      }
      getPost(url, data).then(res => {
        console.log(res);
        if(res.status == 'ok') {
          this.$router.push('/apply')
        }else {
          Toast(res.info)
        }
      })
    }
  },
  filters: {
    Timestamp( timestamp ) {
      var dateObj = new Date( timestamp * 1000 );   
      var year = dateObj.getYear() + 1900;
      var month = dateObj.getMonth() + 1;
      month = month < 10? '0' + month : month;
      var theDate = dateObj.getDate();
      theDate = theDate < 10? '0' + theDate : theDate;
      var hour = dateObj.getHours();
      var minute = dateObj.getMinutes();
      minute = minute < 10? '0' + minute : minute;
      var second = dateObj.getSeconds();
      second = second < 10? '0' + second : second;
      return year +"-"+ month +"-" + theDate + " "+ hour +":"+ minute +":"+ second;     

    }
  }
}
</script>

<style scoped>

.header {
  position: relative;
  width: 10rem;
  height: 8.986667rem;
  background: #ffffff;
}

.nav-bg {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0 0 80% 80%;
  width: 10rem;
  height: 3.92rem;
  background: linear-gradient(180deg,#f66574, #f45c6c);
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1.173333rem;
  padding: 0 .426667rem;
}

.nav-bar .left {
  width: 1.533333rem;
  height: .453333rem;
}

.nav-bar .left img {
  width: .453333rem;
  height: .453333rem;
}

.nav-bar .center {
  font-size: .48rem;
  font-weight: 700;
  color: #fff;
}

.nav-bar .right {
  width: 1.533333rem;
  font-size: .373333rem;
  font-weight: 400;
  color: #fff;
}

.content_box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: .6rem;
  width: 9.173333rem;
  height: 6.826667rem;
  background: linear-gradient(180deg,#fd7a7d, #f63d5f);
  border-radius: .266667rem;
  box-shadow: 0 .04rem .266667rem 0 rgba(0,0,0,0.16); 
}

.feedback_status {
  width: 1.8rem;
  height: .72rem;
  background: #F8536B;
  border-radius: .36rem;
  text-align: center;
  line-height: .72rem;
  font-size: .32rem;
  color: #fff;
  margin: .533333rem auto;
}

.content_title {
  font-size: .826667rem;
  font-weight: 700;
  text-align: center;
  color: #fff;
}

.test {
  margin-top: .4rem;
  font-size: .32rem;
  font-weight: 400;
  text-align: center;
  color: #FFE228;
}

.tips-box {
  margin-top: .8rem;
}

.tips-box div:last-child {
  margin-top: .16rem;
}

.tips-list {
  display: flex;
  align-items: center;
  font-size: .346667rem;
  color: #fff;
}

.tips-list span {
  width: .346667rem;
  height: .346667rem;
  background: #fff;
  border-radius: 50%;
  font-size: .266667rem;
  font-weight: 400;
  text-align: center;
  line-height: .346667rem;
  color: #757DEF;
  margin: 0 .133333rem 0 .266667rem;
}

.tips-list p {
  margin: 0;
}

.tips_notes {
  font-size: .32rem;
  font-weight: 400;
  color: #ffe228;
  padding: .266667rem;
  line-height: .466667rem;
}

.game_info {
  margin-top: .4rem;
  box-sizing: border-box;
  width: 10rem;
  height: auto;
  padding: 0 .426667rem;
}

.info_list li {
  width: 100%;
  height: 1.066667rem;
  display: flex;
  align-items: center;
}

.info_list li span {
  margin-right: .4rem;
  width: 1.946667rem;
  height: .666667rem;
  background: #f5f5f5;
  border-radius: .333333rem;
  font-size: .346667rem;
  font-weight: 400;
  text-align: center;
  line-height: .666667rem;
  color: #777777;
}

.info_list li h3 {
  font-size: .346667rem;
  font-weight: 400;
  color: #222222;
}

.btn_box {
  box-sizing: border-box;
  width: 8rem;
  height: 1.066667rem;
  margin: .8rem auto;
  background: #f6f4ff;
  border: .013333rem solid #a4a3da;
  border-radius: .533333rem;
  text-align: center;
  line-height: 1.066667rem;
  color: #7D80D4;
  font-size: .48rem;
  font-weight: 800;
}
</style>